<template>
	<div>
		<div>总计：{{ count }}</div>
		<div v-for="(item, index) in data01" :key="index">
			<div class="parent">
				<span class="name">{{ item.name }}</span>
				<span class="age">{{ item.age }}</span>
			</div>
			<div class="child" v-for="(inItem, inIndex) in item.children">
				<span class="name">{{ inItem.name }}</span>
				<span class="age">{{ inItem.age }}</span>
			</div>
		</div>
		<children :data="count"></children>
	</div>
</template>

<script setup name="monitoring">
import { reactive, shallowRef, isReactive, ref, watch, watchEffect, onMounted } from 'vue';
import children from './components/children.vue';

const count = ref([
	{ name: '张三之子', age: 10 },
	{ name: '张三之女', age: 10 }
]);
let data01 = reactive({
	one: { name: '张三', age: 38, children: [{ name: '张三之子', age: 10 }] },
	two: { name: '李四', age: 35, children: [{ name: '李四之子', age: 6 }] }
});

watch(count, (newValue, oldValue) => {
	console.log('~~parent watch监听 ~~');
	console.log(newValue, oldValue);
});
onMounted(() => {
	setTimeout(() => {
		count.value.push({ name: 'hha' });
	}, 1e3);
});
</script>

<style lang="scss" scoped></style>
